import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        admin: {
            id: 0,
            userName: '',
            name: '',
            mobile: '',
            lastLogin: '',
            permissions: [], // 用户具备的权限，字符串数组，如['user.create','user.view','user.delete']
        },
        sysPagerHeader: {
            title: '',
            desc: '',
            breadcrumb: [] // 面包屑导航
        },
        includePageNames: [],
    },
    /*
    mutations和actions 有同步和异步的区别，建议在vue官网查看二者差异，以免被坑.
    Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。
    Mutation 必须是同步函数，如果要异步改变mutation，请使用action来提交mutation，action异步处理完成后，在提交mutation来改变状态值。

    经过测试：其实Mutation用异步也没得问题，数据也是正确的，只是在Devtools的状态变更记录里面显示的数据不对，无法跟踪状态变化。具体看这个 https://www.jianshu.com/p/d071e205b249
    */
    mutations: {
        // 如果要设置admin的值就用 this.$store.commit('setAdmin',{ admin信息 })
        setAdmin(state,payload){
            state.admin = payload;
        },
        adminLogout (state) {
            localStorage.removeItem(window.consts.strings.adminToken);
            state.admin = {
                id: 0,
                userName: '',
                name:'',
                mobile: '',
                lastLogin: '',
                permissions:[],
            }
        },
        setSysPagerHeader (state, payload) {
            state.sysPagerHeader = payload
        },
        setIncludePageNames(state, payload) {
            state.includePageNames = payload
        },
    },
    /*
    Action 提交的是 mutation，而不是直接变更状态。
    */
    actions: {
        // 使用 this.$store.dispatch('setAdmin',{...}) 触发
        setAdmin(context,payload){
            context.commit('setAdmin',payload);
        },
        adminLogout(context){
            context.commit('adminLogout')
        },
    },
    // getters建议查看官方文档，比如要对state的数据进行过滤就用得上，getters也是一个计算属性，只有当state里面依赖的值变化是才会重新计算，
    // 文档：https://vuex.vuejs.org/zh/guide/getters.html
    getters: {
        //访问this.$store.getters.adminPermissions
        adminPermissions: state => {
            return state.admin.permissions;
        }
    },
    modules: {
        // 模板化是将不同板块的状态存储独立管理，一般项目没必要搞那么复杂
    }
})
